<template>
  <view class="root">
    <acme-app-bar title="Popup"></acme-app-bar>
    <acme-cell-group :radius="10" width="95%">
      <acme-cell title="Popup1" link @click="showPopup('showPopup1')"/>
      <acme-cell title="Popup2" link @click="showPopup('showPopup2')"/>
      <acme-cell title="Popup3" link @click="showPopup('showPopup3')"/>
    </acme-cell-group>
    <popup1 v-model="showPopup1"></popup1>
    <popup2 v-model="showPopup2"></popup2>
    <popup3 v-model="showPopup3"></popup3>
  </view>
</template>

<script>
  import AcmeCellGroup from "@/components/acme-design/cell-group"
  import AcmeCell from "@/components/acme-design/cell"
  import Popup1 from './Popup1.vue'
  import Popup2 from './Popup2.vue'
  import Popup3 from './Popup3.vue'
  
  export default {
    components: {
      AcmeCellGroup,
      AcmeCell,
      Popup1,
      Popup2,
      Popup3
    },
    data() {
      return {
        showPopup1: false,
        showPopup2: false,
        showPopup3: false
      }
    },
    methods: {
      showPopup(popup) {
        this[popup] = true
      }
    }
  }
</script>

<style lang="scss" scoped>
  .root {
    padding: 30upx 0 0 0 ;
  }
</style>
